import React from "react";
import './login.css'
import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            account: '',
            password: ''
        }
    }
    componentDidMount() {
        this.clk()
    }
    clk() {
        this.$axios
            .post("https://apipc-xiaotuxian-front.itheima.net/login", {
                account: this.state.account,
                password: this.state.password,
            })
            .then((res) => {
                console.log(res);
                if (res.data.msg == "操作成功") {
                    window.localStorage.setItem('login', res.data.result.token)
                    window.localStorage.setItem('account', res.data.result.account)
                    window.location.href = '/'
                }
            });
    }
    acco(e) {
        this.setState({
            account: e.target.value
        })
    }
    pass(e) {
        this.setState({
            password: e.target.value
        })
    }
    render() {
        return <div>
            <div data-v-37dfd6fc="" id="app">
                <header data-v-37dfd6fc="" className="login-header">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <h1 data-v-37dfd6fc="" className="logo">
                            <a data-v-37dfd6fc="" href="#!">小兔鲜</a>
                        </h1>
                        <h3 data-v-37dfd6fc="" className="sub">欢迎登录</h3>
                        <a data-v-37dfd6fc="" href="/#/" className="entry">
                            进入网站首页
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i>
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i></a>
                    </div>
                </header>
                <section data-v-37dfd6fc="" className="login-section">
                    <div data-v-37dfd6fc="" className="wrapper">
                        <nav data-v-37dfd6fc="">
                            账户登录
                        </nav>
                        <div data-v-37dfd6fc="" className="account-box">
                            <div data-v-37dfd6fc="" className="toggle">
                                <i data-v-37dfd6fc="" className="iconfont icon-envelope-o"></i>
                                使用短信登录

                            </div>
                            <form data-v-37dfd6fc=""
                                noValidate="noValidate"
                                autoComplete="off" className="form">
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-user-o"></i
                                        ><input data-v-37dfd6fc=""
                                            type="text"
                                            placeholder="请输入用户名"
                                            name="account" value={this.state.account} onChange={this.acco.bind(this)} />
                                    </div>
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-lock8"></i
                                        ><input
                                            data-v-37dfd6fc=""
                                            type="password"
                                            placeholder="请输入密码"
                                            name="password" value={this.state.password} onChange={this.pass.bind(this)} />
                                    </div>
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="agree">
                                        <span data-v-37dfd6fc="">我已同意</span>《隐私条款》<span data-v-37dfd6fc="">和</span>《服务条款》
                                    </div>
                                </div>
                                <div className="btn" onClick={this.clk.bind(this)}>登录</div>
                            </form>
                            <div data-v-37dfd6fc="" className="action">
                                <a data-v-37dfd6fc=""
                                    href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"><img
                                        data-v-37dfd6fc=""
                                        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                                        alt="" /></a>
                                <div data-v-37dfd6fc="" className="url">
                                    忘记密码免费注册
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <footer data-v-37dfd6fc="" className="login-footer">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <p data-v-37dfd6fc="">
                            <a data-v-37dfd6fc="" href="#!">关于我们</a
                            ><a data-v-37dfd6fc="" href="#!">帮助中心</a
                            ><a data-v-37dfd6fc="" href="#!">售后服务</a
                            ><a data-v-37dfd6fc="" href="#!">配送与验收</a
                            ><a data-v-37dfd6fc="" href="#!">商务合作</a
                            ><a data-v-37dfd6fc="" href="#!">搜索推荐</a
                            ><a data-v-37dfd6fc="" href="#!">友情链接</a>
                        </p>
                        <p data-v-37dfd6fc="">CopyRight © 小兔鲜儿</p>
                    </div>
                </footer>
            </div>
        </div>
    }
}